<!--
 * @Author: wangkg wangkegui@longfor.com
 * @Date: 2024-05-07 17:46:35
 * @Description: 
-->
<template>
  <div :class="getHeaderClass" :style="headerConfig.baseStyle">
    <div :class="`${prefixCls}__left`">
      <AppLogo
        v-if="isShowLogo"
        v-bind="appLogoProps"
        :class="`${prefixCls}__logo`"
        :titleStyle="headerConfig.titleStyle"
        
      />
    </div>
    <!-- menu start -->
    <div v-if="isHorizontal && isShowMenu" :class="`${prefixCls}__menu`">
      <LayoutMenu />
    </div>
    <!-- menu-end -->
    <div :class="`${prefixCls}-action`">
      <UserDropDown
        :class="`${prefixCls}-action__item`"
        :style="{ ...headerConfig.baseStyle, background: 'unset' }"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { propTypes } from '@/utils/prop-types';
  import { MenuModeEnum } from '@/enums/menu-enum';
  import { computed, unref } from 'vue';
  import './index.scss';
  import AppLogo from './components/app-logo.vue';
  import UserDropDown from './components/user-dropdown/index.vue';
  import { getGlobalCls } from '@/utils/index';
  import LayoutMenu from '../menu-container/index.vue';
  import { appInfo } from '@/config/app-info';
  import { useAppStore } from '@/store/modules/app';

  const props = defineProps({
    fixed: propTypes.bool,
    headerConfig: {
      type: Object,
      default: () => ({
        baseStyle: {
          color: '#fff',
          fontSize: '16px',
          background: 'rgb(4, 51, 107)',
        },
        titleStyle: {
          fontSize: '18px',
          color: '#fff',
        },
      }),
    },
  });

  const appStore = useAppStore();

  const { prefixCls } = getGlobalCls('container-header');


  const mode = computed(() => appStore.getMenuSetting.mode);
  const isShowMenu = computed(() => appStore.getMenuSetting.show);

  const isShowLogo = computed(() => appStore.getProjectConfig.showLogo);
  const isHorizontal = computed(() => {
   return unref(mode) === MenuModeEnum.HORIZONTAL;
  });

  const getHeaderClass = computed(() => {
    return [
      prefixCls,
      {
        [`${prefixCls}--fixed`]: props.fixed,
      },
    ];
  });
  const appLogoProps = computed(() => ({
    logo: appInfo.appIcon,
    titleStyle: props.headerConfig.titleStyle,
    title: appInfo.displayName
  }))
</script>
